<template>
    <scroll-view class="cus-page" scroll-x="true" :style="{background:bgColor}">
        <view v-for="(item,index) in tab" :key="index" :id="'demo'+index" @tap="cutTab(index)"
            :class="['item com-font-30',index == current ? 'item-active' : null]">
                {{ keys ? item[keys] : item }}
            </view>
    </scroll-view>
</template>


<script>
export default {
    name:'', // 元素内横向滚动
    components: {},
    props:{
        bgColor: { type: String, default: "#fff" },
        keys: { type: String, default: "" },
        current: { type: Number, default: 0 },
        tab:{
            type: Array, 
            default: ()=>{
                return []
            }
        }
    },

    data () {
        return {}
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 切换tab
        cutTab(i){
            this.$emit("cutTab",{i:i})
        }
    },
}
</script>


<style scoped lang='scss'>
    .cus-page{
        width: 100%;
        height: 90rpx;
        white-space: nowrap;
        .item{
            display: inline-block;
            height: 100%;
            margin: 0 30rpx;
            line-height: 90rpx;
            text-align: center;
            color: #212122;
            &-active{
                color: #02BDF3;
                position: relative;
                &::after{
                    content: "";
                    width: 60%;
                    height: 6rpx;
                    background: #02BDF3;
                    border-radius: 6rpx;
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%);
                    bottom: 12rpx;
                }

            }
        }
    }
</style>